{% extends 'base.html' %}

{% block title %}地址管理{% endblock %}



{% block headerjs %}


		<link href="/static/assets/css/admin.css" rel="stylesheet" type="text/css">
		<link href="/static/assets/css/amazeui.css" rel="stylesheet" type="text/css">

		<link href="/static/assets/css/personal.css" rel="stylesheet" type="text/css">
		<link href="/static/assets/css/addstyle.css" rel="stylesheet" type="text/css">
		<script src="/static/assets/js/jquery.min.js" type="text/javascript"></script>
		<script src="/static/assets/js/amazeui.js"></script>



        <script>
            $(function(){
                loadProvince();
            });


            function loadProvince(){
                loadArea('province',0,loadCity);
            }

            function loadCity(){
                loadArea('city',$('#province').val(),loadTown);
            }

            function loadTown(){
                loadArea('town',$('#city').val());
            }





            function loadArea(selectId,pid,nextLoad){
                $('#'+selectId).empty();

                $.get('/user/loadArea/',{'pid':pid},function(result){
                    console.log(result.jareaList);

                    //将json格式字符串转换成json对象数组
                    var areaList = JSON.parse(result.jareaList);

                    //遍历数组
                    for(var i=0;i<areaList.length;i++){
                        //获取每一个area的json对象
                        var area = areaList[i];

                        $('#'+selectId).append("<option value='"+area.pk+"'>"+area.fields.areaname+"</option>");
                    }

                    //判断是否需要加载下一级菜单
                    if(nextLoad!=null){
                        nextLoad();
                    }

                });


            }



        </script>

{% endblock %}

{% block main %}

    {% csrf_token %}
    <div class="Bott">
			<div class="wrapper clearfix" style="margin: 0 auto">
				<div class="zuo fl" style="margin-left: 100px">
					<h3>
						<a href="/"><img src="/static/tx.png"></a>
						<p class="clearfix"><span class="fl">[{{ suser.uname }}]</span><span class="fr logout">[退出登录]</span></p>
					</h3>
					<div>
						<ul>
							<li><a href="http://127.0.0.1:8000/user/usercenter/#">我的订单</a></li>
						</ul>
						<ul>
							<li><a href="/user/address/">地址管理</a></li>
						</ul>
                        <ul>
							<li><a href="/">回到首页</a></li>
						</ul>

					</div>
				</div>
				<div class="main-wrap you fl">

					<div class="user-address">
						<!--标题 -->
						<div class="am-cf am-padding">
							<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">地址管理</strong> / <small>Address&nbsp;list</small></div>
						</div>
						<hr>
						<ul class="am-avg-sm-1 am-avg-md-3 am-thumbnails">

                            {% for addrObj in addrList %}

							    <li class="user-addresslist {% if addrObj.isdefault %}defaultAddr{% endif %}">
								<span class="new-option-r"><i class="am-icon-check-circle"></i>默认地址</span>
								<p class="new-tit new-p-re">
									<span class="new-txt">{{ addrObj.aname }}</span>
									<span class="new-txt-rd2">{{ addrObj.aphone }}</span>
								</p>
								<div class="new-mu_l2a new-p-re">
									<p class="new-mu_l2cw">

										<span class="street">{{ addrObj.addr }}</span></p>
								</div>
								<div class="new-addr-btn">
									<a href="#"><i class="am-icon-edit"></i>编辑</a>
									<span class="new-addr-bar">|</span>
									<a href="javascript:void(0);" onclick="delClick(this);"><i class="am-icon-trash"></i>删除</a>
								</div>
							</li>

                            {% endfor %}



						</ul>
						<div class="clear"></div>
						<a class="new-abtn-type" data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0}">添加新地址</a>
						<!--例子-->
						<div class="" id="doc-modal-1">

							<div class="add-dress">

								<!--标题 -->
								<div class="am-cf am-padding">
									<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">新增地址</strong> / <small>Add&nbsp;address</small></div>
								</div>
								<hr>

								<div class="am-u-md-12 am-u-lg-8" style="margin-top: 20px;">
									<form id="frm" class="am-form am-form-horizontal" method="post" action="/user/address/">
                                        {% csrf_token %}
										<div class="am-form-group">
											<label for="user-name" class="am-form-label">收货人</label>
											<div class="am-form-content">
												<input type="text" id="user-name" name="aname" placeholder="收货人">
											</div>
										</div>

										<div class="am-form-group">
											<label for="user-phone" class="am-form-label">手机号码</label>
											<div class="am-form-content">
												<input id="user-phone" name="aphone" placeholder="手机号必填" type="text">
											</div>
										</div>
										<div class="am-form-group">
											<label for="user-address" class="am-form-label">所在地</label>
											<div class="am-form-content address">
												<select id="province" onchange="loadCity();">
													<option value="a">浙江省</option>
													<option value="b" selected="">湖北省</option>
												</select>
												<select id="city" onchange="loadTown();">
													<option value="a">温州市</option>
													<option value="b" selected="">武汉市</option>
												</select>
												<select id="town">
													<option value="a">瑞安区</option>
													<option value="b" selected="">洪山区</option>
												</select>
											</div>
										</div>

										<div class="am-form-group">
											<label for="user-intro" class="am-form-label">详细地址</label>
											<div class="am-form-content">
												<textarea onfocus="fillContent(this);" name="addr" class="" rows="3" id="user-intro" placeholder="输入详细地址"></textarea>
												<small>100字以内写出你的详细地址...</small>
											</div>
										</div>

										<div class="am-form-group">
											<div class="am-u-sm-9 am-u-sm-push-3">
												<a class="am-btn am-btn-danger" onclick="$('#frm').submit()">保存</a>
												<a href="javascript: void(0)" class="am-close am-btn am-btn-danger" data-am-modal-close="">取消</a>
											</div>
										</div>
									</form>
								</div>

							</div>

						</div>

					</div>

					<script type="text/javascript">
						$(document).ready(function() {
							$(".new-option-r").click(function() {
								$(this).parent('.user-addresslist').addClass("defaultAddr").siblings().removeClass("defaultAddr");
							});

							var $ww = $(window).width();
							if($ww>640) {
								$("#doc-modal-1").removeClass("am-modal am-modal-no-btn")
							}

						})
					</script>

					<div class="clear"></div>

				</div>

            </div>
            </div>



{% endblock %}


{% block footerjs %}
    
    
    <script>
    
        $('.logout').click(function () {
    
            $.ajax({
                type:'post',
                url:'/user/logout/',
                data:'csrfmiddlewaretoken='+$('input[name="csrfmiddlewaretoken"]').val(),
                success:function(result){


                    if(result.delflag){
                        window.location.href='/user/login/'
                    }

                }
            })
        })


        function fillContent(textareaObj){
            //获取三级联动菜单选中内容
            var pro = $('#province option:selected').text();
            var city = $('#city option:selected').text();
            var town = $('#town option:selected').text();

            //将菜单地址存放至文本域中
            var addr = pro+' '+city+' '+town;
            $(textareaObj).val(addr);
        }




    </script>


{% endblock %}